<template>
  <div class="box">
    <el-breadcrumb separator="/" class="biaotou">
      <el-breadcrumb-item :to="{ path: '/index' }">
        <el-icon><House /></el-icon>首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>考勤规则</el-breadcrumb-item>
      <el-breadcrumb-item>免勤规则</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="box-box">
      <el-icon><Star /></el-icon>
      <span>免勤规则</span>
    </div>
    <div class="box-one">
      <el-button type="primary" @click="addguize">新增</el-button>
      <el-input
        v-model="input"
        placeholder="请输入搜索内容"
        @change="shijiao"
      />
      <el-button type="primary" @click="sousuo">搜索</el-button>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        class="from"
        table-layout="auto"
      >
        <el-table-column prop="date" label="序号" type="index" width="80" />
        <el-table-column prop="proname" label="名称" />
        <el-table-column prop="radius" label="适用范围" />
        <el-table-column label="状态">
          <template #default="scope">
            <el-switch
              v-model="scope.row.flag"
              @click="zhuangtai(scope.row.id, scope.row.flag)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="danger" @click="shanchu(scope.row.id)"
              >删除</el-button
            >
            <el-button type="primary" @click="bianji(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block"></div>
    <el-drawer
      v-model="drawer"
      title="编辑列表"
      :direction="direction"
      :before-close="handleClose"
      @close="close()"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="ID" prop="id" v-show="false">
          <el-input v-model="ruleForm.id" />
        </el-form-item>
        <el-form-item label="规则名称" prop="proname">
          <el-input v-model="ruleForm.proname" />
        </el-form-item>
        <el-form-item label="适用范围" prop="radius">
          <el-input v-model="ruleForm.radius" type="textarea" />
        </el-form-item>
      </el-form>
      <el-button @click="fanhui">取消</el-button>
      <el-button type="primary" @click="baocun()">保存</el-button>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as service from "../../../api/liwei/liwei";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";
import "element-plus/es/components/notification/style/css";

var $router = useRouter();
var ruleFormRef = ref(null);
var ruleForm = ref({
  proname: "",
  radius: "",
  flag: true,
});
var input = ref("");

var rules = ref({
  proname: [{ required: true, message: "请输入规则", trigger: "change" }],
  radius: [{ required: true, message: "请输入范围", trigger: "change" }],
});

// 失焦，搜索，回溯
var shijiao = async ({ radius_like }) => {
  var res = await service.mianqingliebiao({ radius_like: input.value });
  tableData.value = res.data;
  if (input.value === "") {
    var res = await service.mianqingliebiao();

    tableData.value = res.data;
  }
};

// 搜索
var sousuo = async ({ radius_like }) => {
  var res = await service.mianqingliebiao({ radius_like: input.value });
  tableData.value = res.data;
};

var drawer = ref(false);

// 跳转新增页面
var addguize = () => {
  $router.push("/index/addmianqing");
};

var tableData = ref([]);

onMounted(async () => {
  var res = await service.mianqingliebiao();
  console.log(res);
  tableData.value = res.data;
});

// 改变状态
var zhuangtai = async (id, flag) => {
  console.log({ id, flag });
  var res = await service.mianqinggaibianzhuangtai({ id, flag });
  ElNotification({
    title: "改变通知",
    message: "改变成功",
    type: "success",
    duration: 1000,
  });
};

// 删除
var shanchu = async (id) => {
  console.log(id);
  var res = await service.mianqingshanchu({ id });
  var i = tableData.value.findIndex((item) => item.id == id);
  if (i != -1) {
    tableData.value.splice(i, 1);
    ElNotification({
      title: "删除通知",
      message: "删除成功",
      type: "success",
      duration: 1000,
    });
  }
};

// 编辑状态(回显)
var bianji = (neirong) => {
  drawer.value = true;
  ruleForm.value = neirong;
};

// 保存编辑
var baocun = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      var res = await service.mianqinggaibianzhuangtai(ruleForm.value);
      drawer.value = false;
      ElNotification({
        title: "保存通知",
        message: "保存成功",
        type: "success",
        duration: 1000,
      });
    }
  });
};

var fanhui = async () => {
  drawer.value = false;
  ruleForm.value = {
    proname: "",
    radius: "",
    flag: true,
  };
  var res = await service.mianqingliebiao();
  console.log(res);
  tableData.value = res.data;
};

// 关闭事件
var close = async () => {
  var res = await service.mianqingliebiao();
  console.log(res);
  tableData.value = res.data;
};
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  .biaotou {
    font-size: 18px;
  }
  .box-one {
    margin-top: 20px;
  }
  .from {
    margin-top: 20px;
  }
  .box-box {
    font-size: 20px;
    margin-top: 20px;
    font-weight: 700;
    // margin-left: 40px;
    // padding-left: 40px;
    padding-bottom: 10px;

    border-bottom: 1px solid;
  }
  .el-input {
    width: 200px;
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>